<template>
	<view class="sign-container">
		<view class="shop-name">{{storeInfo.shopName||'-'}}</view>
		<view class="address">
			<uni-icons type="location" size="15" color="rgba(255, 255, 255, 0.5)"></uni-icons>
			{{storeInfo.location||'-'}}
		</view>
		
		<view class="sign-box flexWarpCenterColumn">
			<view class="tips" v-if="!canSign">不在范围内，请在500米内签到</view>
			<view class="tips" style="color:rgba(38, 188, 253, 1) ;" v-else>已在签到范围内</view>
			<view class="btn-box" :class="{'active-box':canSign}" @tap="handleSign">
				<view class="inner-box">签到</view>
			</view>
		</view>
	</view>
</template>

<script>
	import utils from '@/common/lib/util.js'
	export default{
		data(){
			return{
				storeInfo:null,
				canSign:false,
			}
		},
		onLoad() {
			this.getStoreInfo()
			this.getLocation()
		},
		onPullDownRefresh() {
			this.getLocation()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 500)
		},
		methods:{
			// 获取经纬度
			getLocation() {
				let that = this
				uni.showLoading({
					title: '获取定位中...',
				})
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					isHighAccuracy: true,
					success: function(res) {
						console.log(res)
						that.longitude = res.longitude
						that.latitude = res.latitude
						// uni.setStorageSync('longitude', that.longitude)
						// uni.setStorageSync('latitude', that.latitude)
						uni.hideLoading()
						that.getDiatance()
					},
					// fail(res) {
					// 	uni.hideLoading()
					// 	// that.freshList();
					// 	uni.showModal({
					// 		title: '提示',
					// 		content: '请点右上角-设置-允许使用位置，重新定位'
					// 	})
					// }
				});
			},
			
			// 获取店铺位置信息
			getStoreInfo(){
				this.$request.get(this.$api.getStoreInfo, {
					storeId:uni.getStorageSync('store_id'),
				}, {
					isJava: true
				}).then(res => {
					if(res.code==200){
						let {
							data = {}
						} = res;
						this.storeInfo=data
					}
				})
			},
			
			// 获取当前经纬度与店铺的距离 单位米
			getDiatance(){
				this.$request.get(this.$api.getDistance, {
					storeId:uni.getStorageSync('store_id'),
					// lat:30.594804281673696,
					// lon:104.06321215766175,
					lat:this.latitude,
					lon:this.longitude,
				}, {
					isJava: true
				}).then(res => {
					if(res.code==200){
						let {
							data = {}
						} = res;
						if(data<500){
							this.canSign=true
						}else{
							this.canSign=false
						}
					}
				})
			},
			
			// 点击签到
			handleSign:utils.debounce(function(){
				if(this.canSign){
					this.$request.post(this.$api.sign, {
						storeId: uni.getStorageSync('store_id'),
						signLon: this.longitude,
						signLat: this.latitude,
						// signLon: 104.06321215766175,
						// signLat: 30.594804281673696,
					}, {
						isJava: true
					}).then(res => {
						if(res.code==200){
							this.$tools.showToast('签到成功')
							setTimeout(()=>{
								uni.navigateTo({
									url:'/shop-inspection/patrolReport'
								})
							},1000)
						}
					})
				}
			},1200),
		},
	}
</script>

<style lang="scss" scoped>
	.sign-container{
		padding: 32rpx;
		.shop-name{
			font-size: 32rpx;
			color: #fff;
		}
		.address{
			margin-top: 10rpx;
			font-size: 26rpx;
			color: rgba(255, 255, 255, 0.5);
		}
		
		.sign-box{
			margin: 260rpx auto;
			.tips{
				font-size: 26rpx;
				color: #FFB726;
				margin-bottom: 30rpx;
			}
			.btn-box{
				width: 230rpx;
				height: 230rpx;
				border-radius: 50%;
				background: rgba(245, 245, 245, 0.5);
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				&::after{
					content:'';
					display: block;
					width: 200rpx;
					height: 200rpx;
					border-radius: 50%;
					background: #fff;
				}
				.inner-box{
					width: 170rpx;
					height: 170rpx;
					font-size: 40rpx;
					letter-spacing: 2rpx;
					color: #999;
					font-weight: bold;
					border: 2rpx solid #999;
					border-radius: 50%;
					box-sizing: border-box;
					display: flex;
					justify-content: center;
					align-items: center;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%,-50%);
					
					
				}
			}
			
			.active-box{
				background: rgba(38, 188, 253, 0.5);
				.inner-box{
					color: rgba(38, 188, 253, 1);
					border: 1rpx solid rgba(38, 188, 253, 0.8);	
				}
			}
		}
	}
</style>